import React from 'react';
import { Popover } from 'antd';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaScroll, WeaInputSearch } from 'ecCom';

@inject('crmPortalStore')
@observer
export default class CrmE9TopMenu extends React.Component {
  constructor(props) {
    super(props);
    this.onMenuClick = this.onMenuClick.bind(this);
  }

  render() {
    const { crmPortalStore } = this.props;
    const { topMenus, topMenuSelected } = crmPortalStore;
    const _topMenus = toJS(topMenus);
    const _topMenuSelected = toJS(topMenuSelected);
    const topMenuArr = [];
    for (const topMenu of _topMenus) {
      const clsName = (topMenu.type == _topMenuSelected.type) ? 'crm-e9header-top-menu-item-clicked' : 'crm-e9header-top-menu-item';
      topMenuArr.push(
        <div className="crm-e9header-top-menu-div" title={topMenu.name} onClick={() => { this.onMenuClick(topMenu); }}>
          <div className={clsName}>{topMenu.name}</div>
        </div>,
      );
    }
    return (
      <div className="crm-e9header-top-menu">
        {topMenuArr}
      </div>
    );
  }

  onMenuClick(topMenu) {
    const { crmPortalStore } = this.props;
    crmPortalStore.changeTopMenuSelected(topMenu);
  }
}
